<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
    .abc{margin:200px auto;
    position:absolute;
    width:50px;
     height:26px;
     overflow:hidden}
    .a{width:50px;
       height:26px;
       display:block
        }
    .b{ display:block;
        width:50px;
        height:26px;
        transition: all 0.3s linear;
        position:absolute;
        z-index:3;
        background-color:#000;
        opacity:0.8;
        color:#fff;
        text-decoration:none;
        text-align:center;
        font:15px/170px 微软雅黑;
        }
    .myokbox{
        
        list-style-position: inside;float:left;width:40px;height:60px;display:none;z-index:102;border-radius: 3px;position:absolute;border: 2px solid #ccc;border-width: 1px;box-shadow: 4px 8px 9px #666666;;list-style:none;padding: 0;margin: 0
    }
    .lis{
        border: 2px solid #ccc;border-width: 1px;background: #fff;color:#000;
    }
    .lis:hover{
        border: 2px solid #ccc;border-width: 1px;background: #000;color:#fff;opacity:0.5;
    }

    .abc:hover .b{
  transform: translate(0px,-260px);



    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(function(){

            document.oncontextmenu=function(ev){
                return false;
            }
            // document.onclick=function(){
            // }

            $("#myokbox").hide();
            
            $("body").mousedown(function(e) {
                if(e.which==3){
                    var xx = e.originalEvent.x || e.originalEvent.layerX; 
                    var yy = e.originalEvent.y || e.originalEvent.layerY;
                    console.log(xx+"_"+yy)
                    $("#myokbox").show();
                    $("#myokbox").css({position:'relative',top:yy+'px',left:xx+'px'})
                }else if(e.which==1){
                    setTimeout(function(){
                        $("#myokbox").hide();
                    },100)
                   
                    // $('.myokbox').on('click',function(a){
                    //     alert($(this).html())
                    // })
                }
            })
            $(".lis").each(function(){
                $(this).click(function(){
                    switch($(this).val()){
                        case 0:
                            $.ajax({
                                type:'GET',
                                url:'http://119.29.203.29/',
                                headers:{'Upgrade-Insecure-Requests':'1'},
                                success:function(data){
                                    $('.fatherclass').append('<div>'+data+'</div>')
                                }
                            })
                            break;
                        case 1:
                            $.ajax({
                                type:'GET',
                                url:'https://www.zhihu.com/question/39266014',
                                headers:{'Upgrade-Insecure-Requests':'1'},
                                success:function(data){
                                    $('.fatherclass').append('<div>'+data+'</div>')
                                }
                            })
                            break;
                        case 2:
                            break;
                    }
                });
            });
        })
        
    </script>
    <body style="width: 100%;height: 100%">
        <div class="fatherclass" style="width: 100%;height: 100%;position:absolute;">
            <ul id="myokbox" class="myokbox" >
            <li class="lis" value="0">1</li>
            <li class="lis" value="1">2</li>
            <li class="lis" value="2">3</li>
        </ul>
        <div class="abc">

<a href="http://www.baidu.com" class="a">
                    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="500" height="260"> </img>
            </a> 
<a href="http://www.baidu.com" class="b">
           <span>走开</span>
           </a>

        </div>
        </div>
    </body>
</html>